<html>
<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<head>
  <title>Observation Benchmarks</title>
  <meta charset="utf-8">
  <script src="../src/observe.js"></script>
  <script src="chartjs/Chart.js"></script>
  <script src="benchmark.js"></script>
  <script src="observation_benchmark.js"></script>
  <style>
    * {
      font-family: arial, helvetica, sans-serif;
      font-weight: 400;
    }
    body {
      margin: 0;
      padding: 0;
      background-color: rgba(0, 0, 0, .1);
    }
  </style>
</head>
<body>
<h1>Observation Benchmarks</h1>

<select id="benchmarkSelect">
  <option>ObjectBenchmark</option>
  <option>SetupObjectBenchmark</option>
  <option>ArrayBenchmark</option>
  <option>SetupArrayBenchmark</option>
  <option>PathBenchmark</option>
  <option>SetupPathBenchmark</option>
</select>
<select id="configSelect">
</select>

<button id="go">Run Benchmarks</button>

<span>Object Count: </span>
<input id="objectCountInput" style="width: 200px" value="4000, 8000, 16000, 32000"><br>
<span>Mutation Count: </span>
<input id="mutationCountInput" style="width: 200px" value="0, 100, 200, 400, 800, 1600"><br>
<br>
<span id="status"></span>

<section style="width: 100%">
  <article>
    <div style="display:inline-block; padding-bottom: 20px">
      Times in ms
    </div>
    <div style="display:inline-block">
      <canvas id="times" width="800" height="400"></canvas>
    </div>
    <div style="display:inline-block">
      <ul id="legendList">
      </ul>
    </div>
  </article>
</section>
<h3 style="margin-left: 440px">Object Set Size</h3>
<script>
var benchmark;
var goButton = document.getElementById('go');

var objectCountInput = document.getElementById('objectCountInput');
var mutationCountInput = document.getElementById('mutationCountInput');

var statusSpan = document.getElementById('status');

var timesCanvas = document.getElementById('times');
var benchmarkSelect = document.getElementById('benchmarkSelect');
var configSelect = document.getElementById('configSelect');

function changeBenchmark() {
  benchmark = window[benchmarkSelect.value];
  configSelect.textContent = '';
  benchmark.configs.forEach(function(config) {
    var option = document.createElement('option');
    option.textContent = config;
    configSelect.appendChild(option);
  });

  document.title = benchmarkSelect.value;
}

benchmarkSelect.addEventListener('change', changeBenchmark);

changeBenchmark();
var ul = document.getElementById('legendList');
var colors = [
  [0, 0, 255],
  [138,43,226],
  [165,42,42],
  [100,149,237],
  [220,20,60],
  [184,134,11]
].map(function(rgb) {
  return 'rgba(' + rgb.join(',') + ',.7)';
});

goButton.addEventListener('click', function() {
  goButton.disabled = true;
  goButton.textContent = 'Running...';
  ul.textContent = '';

  var objectCounts = objectCountInput.value.split(',').map(function(val) {
    return Number(val);
  });
  var mutationCounts = mutationCountInput.value.split(',').map(function(val) {
    return Number(val);
  });

  mutationCounts.forEach(function(count, i) {
    var li = document.createElement('li');
    li.textContent = count + ' mutations.'
    li.style.color = colors[i];
    ul.appendChild(li);
  });

  var results = [];

  function benchmarkComplete(times) {
    timesArray = [];
    var index = 0;


    mutationCounts.forEach(function(mutationCount, i) {
      timesArray.push([]);
      objectCounts.forEach(function(objectCount, j) {
        timesArray[i][j] = times[j][i];
      });
    });

    timesCanvas.height = 400;
    timesCanvas.width = 800;
    timesCanvas.setAttribute('style', '');

    var ctx = timesCanvas.getContext("2d");
    new Chart(ctx).Line({
      labels: objectCounts,
      datasets: timesArray.map(function(times, i) {
        return {
          fillColor: 'rgba(255, 255, 255, 0)',
          strokeColor: colors[i],
          pointColor: colors[i],
          pointStrokeColor: "#fff",
          data: times
        };
      })
    }, {
      bezierCurve: false
    });

    goButton.disabled = false;
    goButton.textContent = 'Run Benchmarks';
    statusSpan.textContent = '';
  }

  function updateStatus(benchmark, mutationCount, count) {
    statusSpan.textContent = 'Testing: ' +
        benchmark.objectCount + ' objects, ' +
        mutationCount + ' mutations ... ' +
        count + ' runs';
  }

  var benchmarks = objectCounts.map(function(objectCount) {
    return new benchmark(configSelect.value, objectCount);
  });

  Benchmark.all(benchmarks, mutationCounts, updateStatus)
    .then(benchmarkComplete);
});
</script>
</body>
</html>
